<!DOCTYPE html>
<html>
<head>
    <title>Text Editor</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }
        /*#saveButton {*/
        /*    padding: 12px 24px;*/
        /*    font-size: 16px;*/
        /*    margin-bottom: 15px;*/
        /*    align-self: flex-start;*/
        /*}*/
        #saveButton {
            padding: 8px 16px;   /* 适当缩小间距 */
            font-size: 16px;     /* 固定字体大小 */
            color: white;        /* 白色文字 */
            background-color: #4CAF50; /* 绿色背景 */
            border: none;        /* 去掉边框 */
            border-radius: 4px;  /* 圆角边框 */
            cursor: pointer;     /* 鼠标指针样式 */
            transition: opacity 0.3s; /* 简单透明度过渡 */
        }
        #content {
            flex: 1;
            padding: 15px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>

<div style="display: flex; align-items: center; margin-bottom: 15px;">
    <div style="display: flex; align-items: center; margin-right: 15px;">
        <input type="number" id="deleteMinutes" min="1" value="60"
               style="width: 60px; padding: 4px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px;">
        <span style="margin-left: 5px; font-size: 14px;">分钟后自动删除</span>
    </div>
    <button id="saveButton">保存</button>
    <span id="saveStatus" style="margin-left: 10px; color: green;"></span>
    <span id="countdown" style="margin-left: 20px; color: red;"></span>
</div>
<textarea id="content">{{.Data}}</textarea>
<script>

    document.addEventListener('DOMContentLoaded', function() {
        // 格式化为ISO8601时间字符串
        const deleteTimeStr = "{{.DeleteTime}}";
        // 处理零值情况（当时间为默认零值时不显示倒计时）
        if (!deleteTimeStr || deleteTimeStr === "0001-01-01T00:00:00") {
            return;
        }

        const deleteTime = new Date(deleteTimeStr);
        const deleteMinutesInput = document.getElementById('deleteMinutes');

        const now = new Date();
        const remainingMs = deleteTime - now;
        const remainingMinutes = Math.ceil(remainingMs / (1000 * 60));

        deleteMinutesInput.value = remainingMinutes;


        const countdownElement = document.getElementById('countdown');

        function updateCountdown() {
            const now = new Date().getTime();
            const distance = deleteTime - now;

            if (distance <= 0) {
                clearInterval(timer);
                countdownElement.textContent = "已过期";
                return;
            }

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            countdownElement.textContent = `倒计时：${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`;

            {
                const now = new Date();
                const remainingMs = deleteTime - now;
                const remainingMinutes = Math.ceil(remainingMs / (1000 * 60));

                deleteMinutesInput.value = remainingMinutes;
            }
        }

        updateCountdown();
        const timer = setInterval(updateCountdown, 5000);
    });

    document.getElementById('saveButton').addEventListener('click', () => {
        const content = document.getElementById('content').value;
        const minutes = parseInt(document.getElementById('deleteMinutes').value) || 60;
        const status = document.getElementById('saveStatus');
        fetch(window.location.pathname, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                data: content,
                minutes: minutes
            })
        })
            .then(response => {
                if (response.ok) {
                    // 只有根路径保存需要重定向
                    if (window.location.pathname === '/') {
                        response.json().then(data => {
                            window.location.href = data.redirect;
                        });
                    } else {
                        status.textContent = '保存成功！';
                        setTimeout(() => status.textContent = '', 2000);
                    }
                } else {
                    status.textContent = '保存失败';
                    status.style.color = 'red';
                }
            });
    });
</script>
</body>
</html>